<template>
  <div class="page_dept app-container" v-loading="loading">
    <cfCard title='' class='page-container-search bottom12'>
      <div slot='content'>
        <el-form :model="searchParams" ref="searchParams" size="small" :inline="true">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="searchParams.deptName" placeholder="请输入部门名称" clearable v-search="handleSearch"/>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="searchParams.status" placeholder="部门状态" clearable @change="handleSearch">
              <el-option v-for="dict in sysNormalDisable" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </cfCard>
    <cfCard title='部门列表' hasTable :tableObj='tableDataObj' class='page_component-container-top'>
      <template slot="btn">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd('')" v-hasPermi="['system:dept:add']">新增</el-button>
      </template>
      <div slot='content'>
        <cfTable :tableDataObj='tableDataObj' :tableData='tableData'>
          <template slot='status'>
            <el-table-column label='状态' width="100" align="center">
              <dict-tag slot-scope="scope" :options="sysNormalDisable" :value="scope.row.status"/>
            </el-table-column>
          </template>
          <template slot='createTime'>
            <el-table-column label='创建时间' width='180px'>
              <span slot-scope="scope">{{ parseTime(scope.row.createTime) }}</span>
            </el-table-column>
          </template>
          <template slot='operate'>
            <el-table-column label='操作' width='160px' align='right'>
              <span slot-scope='{row}'>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(row)" v-hasPermi="['system:dept:edit']" >修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(row)" v-hasPermi="['system:dept:add']" >新增</el-button>
                <el-button v-if="row.parentId != 0" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)" v-hasPermi="['system:dept:remove']" >删除</el-button>
              </span>
            </el-table-column>
          </template>
        </cfTable>
      </div>
    </cfCard>
    <updateDialog v-if="dialogObj.visible" :dialogObj="dialogObj" @refresh="getListFn"></updateDialog>
  </div>
</template>

<script>
import { listDept, delDept} from "@/api/system/dept";
import updateDialog from './updateDialog.vue'
export default {
  name: "Dept",
  components: {updateDialog},
  data() {
    return {
      tableData: [],  /**表格树数据*/ 
      searchParams: {  /**查询参数*/ 
        deptName: undefined,
        status: undefined
      },
      tableDataObj: {
        id: 'deptId',
        showSelection: false,
        defaultExpandAll: true,
        treeProps: {children: 'children', hasChildren: 'hasChildren'},
        option: [
          {id: 1, label: '部门名称', prop: 'deptName', show: 1, needSlot: false},
          {id: 3, label: '排序', prop: 'orderNum', width: 80, show: 1, needSlot: false},
          {id: 6, label: '状态', prop: 'status', show: 1, needSlot: true},
          {id: 7, label: '创建时间', prop: 'createTime', show: 1, needSlot: true}
        ]
      },
      dialogObj: {
        visible: false,
        title: "添加部门",
        width: '538px',
        id: '',
        parentId: ''
      },
      loading: true
    };
  },
  async created() {
    await this.getSysNormalDisable();
    this.getListFn();
  },
  methods: {
    async getListFn() {  /** 查询部门列表 */
      this.loading = true;
      const res = await listDept(this.searchParams)
      if(res.code == 200) {
        this.tableData = this.handleTree(res.data, "deptId");
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleSearch() {  /** 搜索按钮操作 */
      this.getListFn();
    },
    handleReset() {  /** 重置按钮操作 */
      this.resetForm("searchParams", () => {
        this.handleSearch();
      });
    },
    handleAdd(row) {  /** 新增按钮操作 */
      this.dialogObj.visible = true;
      this.dialogObj.title = '新增部门';
      this.dialogObj.id = '';
      this.dialogObj.parentId = '';
      if (row) {
        this.dialogObj.parentId = row.deptId;
      }
    },
    handleEdit(row) {  /** 修改按钮操作 */
      this.dialogObj.visible = true;
      this.dialogObj.title = '编辑部门';
      this.dialogObj.id = row.deptId;
    },
    handleDelete(row) {  /** 删除按钮操作 */
      this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项？', '提示').then(async () => {
        this.loading = true;
        const res = await delDept({deptId: row.deptId})
        if(res.code == 200) {
          this.$message.success('删除成功');
          setTimeout(() => {
            location.reload();
          }, 1000);
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(() => {});
    }
  }
};
</script>
